<template>
  <router-view v-slot="{ Component }" v-if="!isPC">
    <transition :name="transitionClassName">
      <keep-alive :include="needKeepAliveRoutes">
        <component class="app-page" :is="Component"></component>
      </keep-alive>
    </transition>
  </router-view>
  <router-view v-slot="{ Component }" v-else>
    <component :is="Component"></component>
  </router-view>
</template>

<script setup lang="ts">
import { watch, ref } from "vue"
import { useRoute } from "vue-router";
import routes from "@/router/routes";


const isPC = ref<boolean>(Boolean(__isPC__));

const transitionClassName = ref<"default" | "front" | "back">("default");

const needKeepAliveRoutes = ref<Array<any>>((() => {
  return routes.filter(item => (item.meta?.keepAlive)).map(item => item.name || '')
})());


const route = useRoute();
/** 初始路由栈值 */
let lastStatePos: number = 0;
watch(route, (_newRoute) => {
  const { position: currentPos = 0 } = history.state || {};
  if (currentPos > lastStatePos) {
    transitionClassName.value = "front"
  } else if (currentPos < lastStatePos) {
    transitionClassName.value = "back";
  } else {
    transitionClassName.value = "default";
  }
  lastStatePos = currentPos;
})
</script>


<style lang="less" scoped>
.app-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: transform .5s ease-in-out;
  box-shadow: 0 0 10px gray;
}


.front-enter-to {
  z-index: 100;
  transform: translate(0, 0) !important;
}

.back-leave-to {
  transform: translate(0, 0);
}

.front-enter-active {
  transform: translate(100%, 0);
}

.back-leave-active {
  z-index: 100;
  transform: translate(100%, 0);
}
</style>
